import React, { PropsWithChildren } from "react";
import {
  AmountItemAmountLine,
  AmountItemImg,
  AmountItemTitle,
  AmountItemTitleWrap,
  AmountItemUnit,
  AmountItemWrap,
} from "./styles";
import CountUp, { CountUpProps } from "react-countup";

export interface AmountItem2Props extends PropsWithChildren {
  /**
   *  设置图片src
   */
  imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;
  /**
   *  预留字段
   */
  titleProps?: React.ImgHTMLAttributes<HTMLDivElement>;
  /**
   * 标题
   */
  title?: string;
  /**
   *  金额
   */
  amount?: number;
  /**
   *  单位
   */
  unitName?: string;
  /**
   *  金额的颜色
   */
  primaryColor?: string;
  /**
   *  组件属性,预留,暂时没用
   */
  countUpProps?: CountUpProps;
}

const AmountItem = ({
  imgProps,
  titleProps,
  title,
  amount = 0,
  unitName = "",
  primaryColor = "#76ACF6",
  countUpProps,
}: AmountItem2Props) => {
  return (
    <AmountItemWrap>
      {imgProps && <AmountItemImg {...imgProps} />}
      <AmountItemTitleWrap>
        <AmountItemTitle {...titleProps}>{title}</AmountItemTitle>
        <AmountItemAmountLine primaryColor={primaryColor}>
          <CountUp start={0} end={amount} decimals={2} {...countUpProps} />
          <AmountItemUnit primaryColor={primaryColor}>
            {unitName}
          </AmountItemUnit>
        </AmountItemAmountLine>
      </AmountItemTitleWrap>
    </AmountItemWrap>
  );
};

export default AmountItem;
